<template>
  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
             center @open="openDialogEvent" width="50%" class="travel-dialog">
    <el-form ref="formRef" :model="dialogData.data" :rules=rules label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="景点名称" prop="name">
            <el-input
                v-model="dialogData.data.name"
                placeholder="请输入景点名称" clearable
                show-word-limit maxlength="20"
            />
          </el-form-item>

          <el-form-item label="景点地区" prop="area">
            <el-cascader
                v-model="dialogData.data.area"
                placeholder="请选择景点地区" :options="pcTextArr">
            </el-cascader>
          </el-form-item>

          <el-form-item label="景点地址" prop="address">
            <el-input
                v-model="dialogData.data.address"
                placeholder="请输入景点地址" clearable
                show-word-limit maxlength="50"
            />
          </el-form-item>

          <el-form-item label="门票价格" prop="price">
            <el-input
                v-model="dialogData.data.price"
                placeholder="请输入门票价格" clearable
                :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
            />
          </el-form-item>

          <el-form-item label="推荐指数" prop="recommendRate">
            <el-rate v-model="dialogData.data.recommendRate"
                     :colors="travelStore.rateColorList"/>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="dialogData.data.remark" type="textarea"
                      placeholder="请输入备注" clearable
                      :rows="5" show-word-limit maxlength="200">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交通指南">
            <el-input v-model="dialogData.data.traffic" type="textarea"
                      placeholder="请输入交通指南" clearable
                      :rows="5" show-word-limit maxlength="200">
            </el-input>
          </el-form-item>

          <el-form-item label="旅游路线">
            <el-input v-model="dialogData.data.router" type="textarea"
                      placeholder="请输入旅游路线" clearable
                      :rows="5" show-word-limit maxlength="200">
            </el-input>
          </el-form-item>

          <el-form-item label="美食推荐">
            <multi-input :data="dialogData.data.foods" :size="5"/>
          </el-form-item>

          <el-form-item label="项目推荐">
            <multi-input :data="dialogData.data.projects" :size="5"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useTravelStore } from '@/store/travel.ts'
import { ref, computed, reactive, nextTick } from 'vue'
import { MultiInput } from 'vue3-common'
import { pcTextArr } from 'element-china-area-data'
import { FormRules } from 'element-plus'
import { travelRules } from '@/utils/element/elRules.ts'

const rules = reactive<FormRules>(travelRules)
const formRef = ref()
const travelStore = useTravelStore()

const dialogData = computed(() => travelStore.travelSpotDialog)

/**
 * 打开对话框事件
 */
const openDialogEvent = async () => {
  await nextTick(() => {
    formRef.value?.clearValidate()
  })
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(() => {
    travelStore.handleTravelSpotApi(travelStore.travelSpotDialog.data)
  })
}

const cancelClick = () => {
  dialogData.value.visible = false
}
</script>
